<template>
  <div class="description">
    <el-form
      ref="form"
      :model="ruleTBForm"
      label-width="80px"
      style="width: 100%"
    >
      <el-row :gutter="20">
        <el-col :span="22">
          <el-col :span="12">
            <el-form-item label="名称1" prop="name">
              <el-input
                size="mini"
                v-model="ruleTBForm.name"
                placeholder="请输入"
                clearable=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位1" prop="unit">
              <el-input
                size="mini"
                v-model="ruleTBForm.unit"
                placeholder="请输入"
                clearable=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="2" style="padding: 0; margin-top: 5px">
          <el-button
            size="mini"
            circle
            type="primary"
            @click="addItem"
            icon="el-icon-plus"
          ></el-button>
        </el-col>
      </el-row>
      <div v-for="(item, index) in ruleTBForm.dynamicItemArr" :key="index">
        <el-row :gutter="20">
          <el-col :span="22">
            <el-col :span="12">
              <el-form-item :label="`名称${index + 2}`" :prop="item.name">
                <el-input
                  size="mini"
                  v-model="item.name"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="`单位${index + 2}`" :prop="item.unit">
                <el-input
                  size="mini"
                  v-model="item.unit"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="2" style="padding: 0; margin-top: 5px">
            <el-button
              size="mini"
              circle
              type="danger"
              @click="deleteItem(item, index)"
              icon="el-icon-delete"
            ></el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    paramsList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      ruleTBForm: {
        name: "",
        unit: "",
        dynamicItemArr: [],
      },
    };
  },
  created() {
    this.handleCustom();
  },
  methods: {
    /**
     * 处理数据项的相关函数
     */
    //回显类似描述的数据，把数据通过分号拆分到几个输入框中
    handleCustom() {
      let customsArr = this.paramsList;
      //debugger
      if (customsArr.length != 0) {
        this.ruleTBForm.name = customsArr[0].name;
        this.ruleTBForm.unit = customsArr[0].unit;
        for (let i = 1; i < customsArr.length; i++) {
          this.ruleTBForm.dynamicItemArr.push({
            name: customsArr[i].name,
            unit: customsArr[i].unit,
          });
        }
      }
    },
    //添加一行输入框
    addItem() {
      this.ruleTBForm.dynamicItemArr.push({
        name: "",
        unit: "",
      });
    },
    //删除一行输入框
    deleteItem(item, index) {
      this.ruleTBForm.dynamicItemArr.splice(index, 1);
    },
    //通过逗号把几个输入框的值拼接起来
    customsHandleConfirm() {
       let entryStr;
      if (this.ruleTBForm.name != "" || this.ruleTBForm.unit != "") {
        entryStr = `${this.ruleTBForm.name}(${this.ruleTBForm.unit})`;
      }else{
        entryStr = "";
      }
      if (this.ruleTBForm.dynamicItemArr.length > 0) {
        this.ruleTBForm.dynamicItemArr.forEach((item) => {
          entryStr += `,${item.name}(${item.unit})`;
        });
      }
      return entryStr;
    },
    //将弹框表单变成数组
    handleDataList() {
      let arr = this.ruleTBForm.dynamicItemArr.concat();
      if (this.ruleTBForm.name != "" || this.ruleTBForm.unit != "") {
        arr.unshift({
          name: this.ruleTBForm.name,
          unit: this.ruleTBForm.unit,
        });
      }
      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
</style>